<template>
  <view class="page container">
    <u-swiper :list="[info.logo]" :radius="0" height="556rpx"></u-swiper>
    <view class="pad-32 bgc-fff" style="padding-bottom: 0">
      <view class="flex-between-center mb-20">
        <text class="fs-40 fw-500">{{ info.title || "" }}</text>
        <text class="fs-28 c-677585">浏览 {{ info.see_num || 0 }}次</text>
      </view>
      <view class="flex-column-center">
        <image src="/static/marker-icon.png" class="w-26 h-32 mr-4"></image>
        <text class="fs-28 c-677585">{{ info.region_name || "" }}</text>
      </view>
      <view class="h-1 bgc-f7f8fa mt-22"></view>
      <view class="h-100 flex-around-center">
        <!-- 收藏 -->
        <view class="flex-column-center" @click="changeCollect">
          <block>
            <u-icon name="heart-fill" color="#ff0000" size="40rpx" v-if="is_collect == 1"></u-icon>
            <u-icon name="heart" color="#677585" size="40rpx" v-else></u-icon>
          </block>
          <text class="fs-28 ml-11 fw-500">收藏</text>
        </view>
        <!-- 分享 -->
        <view class="flex-column-center" @click="openMap">
          <image src="/static/svg/yjdh.svg" class="w-36 h-36"></image>
          <text class="fs-28 ml-11 fw-500">导航</text>
        </view>
      </view>
    </view>
    <view class="pad-32 bgc-fff mt-28">
      <view class="flex-column-center mb-28">
        <view class="w-6 h-34 bgc-c5261d" style="border-radius: 40rpx"></view>
        <view class="fs-32 fw-500 ml-14">门店简介</view>
      </view>
      <u-parse :content="`<p>${info.content || ''}</p>`"></u-parse>
    </view>
    <view class="pad-32 bgc-fff mt-28">
      <view class="flex-column-center mb-28">
        <view class="w-6 h-34 bgc-c5261d" style="border-radius: 40rpx"></view>
        <view class="fs-32 fw-500 ml-14">门店形象展示</view>
      </view>
      <u-swiper indicatorMode="dot" indicator :list="info.images" height="368rpx" radius="12rpx"
        indicatorInactiveColor="#fff" indicatorActiveColor="#C5261D"></u-swiper>
    </view>
    <view class="bottom-box bgc-fff">
      <view class="mt-20">
        <text class="fs-28">联系人：</text>
        <text class="fw-500 fs-36">{{ info.contact_name || "" }}</text>
      </view>
      <u-button :customStyle="btnStyle" @click="$utils.onCall(info.contact_phone || '')">联系TA</u-button>
    </view>
  </view>
</template>
<script>
import GoodsCard from "@/components/rowCards/GoodsCard";
import NewsCard from "@/components/rowCards/NewsCard";
import { storeDetailApi, yan_collectApi } from "@/services/home";
export default {
  data() {
    return {
      btnStyle: {
        border: "none",
        backgroundColor: "#C5261D",
        color: "#fff",
        width: "312rpx",
        height: "88rpx",
        opacity: 1,
        borderRadius: "10rpx",
        background: "#AE2C2C",
      },
      swiperList: ["https://uviewui.com/swiper/swiper1.png"],
      storeId: "",
      is_collect: 0,
      info: {},
    };
  },
  onLoad(options) {
    this.storeId = options.id;
    this.getStoreDetail();
  },
  methods: {
    async changeCollect() {
      await yan_collectApi({
        shop_id: this.storeId,
      });
      this.is_collect = this.is_collect == 1 ? 0 : 1;
    },
    openMap() {
      uni.openLocation({
        latitude: +this.info.lat,
        longitude: +this.info.lng,
        name: this.info.map_address || "",
        address: this.info.map_street || "",
      });
    },
    getStoreDetail() {
      storeDetailApi({ shop_id: this.storeId }).then((res) => {
        this.is_collect = res.data?.is_collect;
        let info = res.data?.shop_info || {};
        info.images = info.images.split(",");
        this.info = info;
      });
    },
  },
  components: { GoodsCard, NewsCard },
};
</script>
<style lang="scss" scoped>
.page {
  padding-bottom: 200rpx;
  background-color: #f7f8fa;
}

.tabs {
  display: flex;
  flex-wrap: wrap;

  .tab-item {
    min-width: 96rpx;
    height: 48rpx;
    background-color: #f7f8fa;
    border-radius: 8rpx;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 22rpx;
    margin-bottom: 22rpx;

    &-active {
      background-color: rgba(197, 38, 29, 0.1);
      color: #fff;
    }
  }
}

.bottom-box {
  padding: 24rpx 32rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
</style>
